<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				
			}
			#canvas{
				border: 10px solid #C98832;
				background: white;
				float: left;
				/*position: absolute;left:580px;*/
				/*margin-left: 300px;*/
			}
			.qc{
				font-size: 13px;
				font-family: "微软雅黑";
				display: block;
				width: 45px;
				height: 24px;
				background: #D84B28;
				border:1px solid #666666;
				text-align: center;
				line-height: 24px;
				color: white;
				text-decoration: none;
				float: left;
				/*position: absolute;left:1120px;top:150px;*/
			}
			.xp{
				font-size: 13px;
				font-family: "微软雅黑";
				display: block;
				width: 45px;
				height: 24px;
				background: #D84B28;
				border:1px solid #666666;
				text-align: center;
				line-height: 24px;
				color: white;
				text-decoration: none;
				float: left;
				/*position: absolute;left:1120px;top:100px;*/
			}
			.bc{
				font-size: 14px;
				font-family: "微软雅黑";
				display: block;
				width: 45px;
				height: 24px;
				background: #2CACCA;
				border:1px solid #666666;
				text-align: center;
				line-height: 24px;
				color: white;
				text-decoration: none;
				float: left;
				/*position: absolute;left:1120px;top:200px;*/
			}
			#colorSelect{
				float: left;
				/*position: absolute;left:1120px;top:50px;*/
			}
			.x{
				float: left;
				width: 50px;
			}
			#box{
				width: 500px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
//		显示文本窗口
			window.onload=function(){
//				创建js类方法函数，和项目中的类方法一样
				var blackBoard=function(){
					
//					把原生对象赋予变量
					var hd=this;

					//创建画布对象2d
					hd.ctx=document.getElementById("canvas").getContext('2d');
					//设置线条颜色
//					hd.lineColor='color';
//					设置线条宽度
					hd.ctx.lineWidth=3;
//					设置文章颜色
					hd.ctx.fillStyle="#4A9C4A";
//					设置文章大小及字体
					hd.ctx.font='40px Arial';
//					设置对其方式
					hd.ctx.textalign='left';
//					设置基准线
					hd.ctx.textBaseline='top';
//					写入文字
					hd.ctx.fillText('梁 仁 健',20,440,80);
					hd.ctx.save();
					//设定画图方法函数
					hd.run=function(){
					hd.ctx.restore();
//					抓取颜色对象
					var sete=document.getElementById("colorSelect");
//						改变颜色方法
						sete.onchange=function(){
//						定义获取当前对象的value,这样才能选颜色
						var color=this.value;
	
						//当鼠标按下时，开始出发路径，设置线颜色和线宽
						$('#canvas').mousedown(function(e){
//							hd.ctx.restore(); 
							//初始化起点或开始起点
							hd.ctx.beginPath();
							//设置线颜色
							hd.ctx.strokeStyle=color;
							//设置线宽
							hd.ctx.lineWidth=3;
							//e.client 获得鼠标距离屏幕左侧的像素
							//$(this).position().left 获得相对父级元素的偏离像素
							hd.ctx.moveTo(e.clientX-$(this).position().left,e.clienTy-$(this).position().top);
							//按下鼠标同时移动，设置终点，绘制线条
							$(this).mousemove(function(e){
							hd.ctx.lineTo(e.clientX-$(this).position().left,e.clientY-$(this).position().top);
//							绘画
							hd.ctx.stroke();
							
							})
//							当抬起鼠标时,解除画布mousemove事件
							$(document).mouseup(function(){
								$('#canvas').unbind('mousemove');
							})
						})						
					}
					}
//					清除画布里边的像素方法函数
					hd.close=function(){
//						$(this).attr('kai');
//						清除像素
						hd.ctx.clearRect(0,0,500,445);
					}
//					清除画布里边的像素方法函数
//					hd.save=function(){
//					   var ctx=document.getElementById("canvas");
//						var imgData =ctx.toDataURL('image/jpg');
//						document.getElementById("img").src  = imgData;

						
//					}

					
					hd.xp=function(){	
						//当鼠标按下时，开始出发路径，设置线颜色和线宽
						$('#canvas').mousedown(function(e){
							
							//初始化起点或开始起点
							hd.ctx.beginPath();
							//设置线颜色
							hd.ctx.strokeStyle='white';
							//设置线宽
							hd.ctx.lineWidth=10;
							//e.client 获得鼠标距离屏幕左侧的像素
							//$(this).position().left 获得相对父级元素的偏离像素
							hd.ctx.moveTo(e.clientX-$(this).position().left,e.clienTy-$(this).position().top);
							//按下鼠标同时移动，设置终点，绘制线条
							$(this).mousemove(function(e){
							hd.ctx.lineTo(e.clientX-$(this).position().left,e.clientY-$(this).position().top);
//							绘画
							hd.ctx.stroke();
							
							})
//							当抬起鼠标时,解除画布mousemove事件
							$(document).mouseup(function(){
								$('#canvas').unbind('mousemove');
							})
						})

						
					}

					}
			
//				实例化
				var obj=new blackBoard;
//				var obj=new onchange;
//				执行函数
				obj.run();
				
				var Arr=window.sessionStorage.getItem('imgData');
					if(!Arr){
						Arr=[];
					}else{
						Arr=JSON.parse(Arr);
					}
					$('.bc').click(function(){
						var imgData=document.getElementById("canvas").toDataURL('image/png');
						$("#box").append('<img src="'+imgData+'"/>');
						Arr.push(imgData);
						var data=JSON.stringify(Arr);
						window.sessionStorage.setItem('imgData',data);
						
					})
					function showImg(){
						var data=window.sessionStorage.getItem('imgData');
						if(!data){
							data=[];
						}else{
							data=JSON.parse(data);
						}

						var str='';
						$.each(data, function(k,v) {
							str +='<img src="'+v+'"/>';
						});
						$('#box').html(str);
					}
					showImg();
//				
//				点击事件
				$('.qc').click(function(){
//					实例化
					var close=new blackBoard;
//					执行清除方法
					close.close();
				});
//				$('.bc').click(function(){
////					实例化
//					var save=new blackBoard;
//
////					执行保存方法
//					save.save();
//				})
				$('.xp').click(function(){
//					实例化
					var xp=new blackBoard;
//					执行清除方法
					xp.xp();
				})
				
			}
		</script>
		
		<canvas id="canvas" width="500" height="500"></canvas>
		<div class="x">
			<a href="javascript:;" class="xp" kai="false">橡皮擦</a>
		<a href="javascript:;" class="qc" kai="false">黑板擦</a>
		<a href="javascript:;" class="bc">保存</a>
		<input type="color" name="colorSelect" id="colorSelect" value="" />
		</div>
		
		<div id="box">
			<img src="" id="img"/>	
		</div>
	</body>
</html>
